<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加节点</title>
    <script>
        function f1(){
            // 创建元素节点
            let d = document.createElement("div");
            // 创建文本节点
            let text = document.createTextNode("这是一个div");
            // 目前所创建的两个节点之间并没有联系
            // 我们需要将文本添加到元素的标签体中
            // node.appendChild(childNode)
            // 将一个指定的节点childNode添加到指定节点node的标签体的末尾
            d.appendChild(text);
            // 将div添加到超链接的标签体
            let a1 = document.getElementById("a1");
            a1.appendChild(d);

            // node.insertBefore(newNode,refNode)
            // 将一个新的节点newNode插入到指定节点node的子节点refNode之前
            let b = document.getElementById("b");
            // b.insertBefore(d,a1);

            // node.replaceChild(newNode,refNode)
            // 使用一个新的节点newNode替换指定节点node中原有的子节点refNode
            b.replaceChild(d,a1);

        }
    </script>
</head>
<body id="b">
<!--
    由于超链接点击之后本身就自带事件
    事件为跳转页面
    为了让其只执行js事件,可以在href属性中进行定义
    让超链接跳转之后什么都不做
    可以让超链接跳转时,访问js
    在href属性中使用简短缩写方式即可
    这个js什么都不做
-->
<a href="javascript:;" id="a1" onclick="f1()">添加</a>
</body>
</html>